<template>
	<view>
		<view class="status_bar">

		</view>
		<view>
			<view style="height: 90px;" class="">

			</view>
			<van-nav-bar title="拍卖行" bind:click-left="onClickLeft" bind:click-right="onClickRight" fixed="true" />
		</view>
		<view class="">
			<van-dropdown-menu active-color="#1989fa">
				<van-dropdown-item v-model="value1 " :options="option1" @change="onChange" />
				<van-dropdown-item v-model="value2" :options="option2" @change="onChange2" />
			</van-dropdown-menu>
		</view>
		<view class="">
			<view @click="godetails(item)" v-for="item,index in auctionlist" :key="index" class="shop-item">
				<image :src="item.commodityImg" mode=""></image>
				<view class="shop-item-r">
					<view class="">
						<text>变卖</text>{{item.commodityName}}
					</view>
					<view class="price-txt">
						当前价 <text>￥{{item.nowPrice}}</text>
					</view>
					<view class="">
						{{item.recordcount}}次出价
					</view>
					<view class="shop-time">
						<text>{{item.auctionstate==1?'拍卖中':"预告中"}}</text><text>预计{{item.endTime}}结束</text>
					</view>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	import request from '../../com/request.js'
	export default {
		data() {
			return {
				option1: [{
						text: '全部商品',
						value: 0
					},
					{
						text: '最新发布',
						value: 1
					},
					{
						text: '即将结束',
						value: 2
					},
				],
				option2: [{
						text: '当前价格',
						value: 'a'
					},
					{
						text: '价格由高到低',
						value: 'b'
					},
					{
						text: '价格由低到高',
						value: 'c'
					},
				],
				value1: 0,
				value2: 'a',
				auctionlist: []
			}
		},
		methods: {
			onChange(val) {
				console.log(this.option1[val.detail]);
				if(val.detail==1){
					this.auctionlist.sort((a,b)=>{
						 return Date.parse(b.startTime) - Date.parse(a.startTime);
					})
				}else if(val.detail==2){
					this.auctionlist.sort((a,b)=>{
						 return Date.parse(b.endTime) - Date.parse(a.endTime);
					})
				}
			},
			onChange2(val){
				console.log(val.detail);
				if(val.detail=='b'){
					this.auctionlist.sort((a,b)=>{
						 return Date.parse(b.nowPrice) - Date.parse(a.nowPrice);
					})
				}else if(val.detail=='c'){
					this.auctionlist.sort((a,b)=>{
						 return Date.parse(a.nowPrice) - Date.parse(b.nowPrice);
					})
				}
			},
			godetails(obj) {
				uni.navigateTo({
					url: `/pages/AuctionDetails/AuctionDetails?auctionobj=${JSON.stringify(obj)}`
				})
				
			}
		},
		onLoad() {
			request({
				url: 'api/auction/getshoplist1',
				success: (resp) => {
					console.log(resp.data);
					this.auctionlist = resp.data.data
				}
			})


		}
	}
</script>

<style scoped>
	.status_bar {
		height: calc(var(--status-bar-height) - 4px);
		width: 100%;
		/* background-color: #007aff; */
	}

	.shop-item {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 10px 0 10px 0;


	}

	.shop-item image {
		width: 260rpx;
		height: 211rpx;
		border-radius: 10px;
		margin: 0 10px 0 10px;

	}

	.price-txt {
		color: rgb(191, 17, 78);
		font-size: 20rpx;
	}

	.price-txt text {
		font-size: 40rpx;
		font-weight: 600;
	}

	.shop-item-r>view:nth-child(1) {
		height: 45px;
		line-height: 23px;
		width: 480rpx;
		font-size: 16px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.shop-item-r>view:nth-child(1)>text {
		display: inline-block;
		text-align: center;
		width: 32px;
		height: 16px;
		line-height: 16px;
		background-color: red;
		color: white;
		font-size: 22rpx;
		border-radius: 5px;
		margin-right: 3px;
	}

	.shop-time {
		display: flex;
		align-items: center;
	}

	.shop-time>text:nth-child(1) {
		display: inline-block;
		width: 92rpx;
		height: 20px;
		line-height: 19px;
		text-align: center;
		font-size: 25rpx;
		background-color: rgb(231, 27, 100);
		color: white;
		border-radius: 0 10px 10px 0;
		margin-right: 3px;
	}

	.shop-time>text:nth-child(2) {
		font-size: 25rpx;
		background-color: rgb(0, 0, 0, 0.1);
		height: 20px;
		line-height: 19px;
		border-radius: 5px;
		padding: 0 10rpx 0 10rpx;
	}
</style>
